<template>
<div>
  <!-- 
    v-for指令
    语法1：v-for="自定义临时变量名 in 目标数据"
      自定义临时变量名: 就是目标数据中的元素
    
    作用：循环遍历数据

    需求：把arr数组中的元素，循环渲染到li标签中
   -->
   <ul>
    <li v-for="item in arr" :key="item">{{ item }}</li>
   </ul>
   <!-- 
    语法2：
      v-for="(临时变量，下标值变量) in 目标数据"
    -->
   <ul>
    <li v-for="(item, index) in arr" :key="index">数组元素：{{ item }} ---- 下标值：{{index}}</li>
   </ul>
   <!-- 
    v-form循环对象
      语法：v-for="(item,key) in obj"
      注意：循环对象的时候，key指的是对象的属性名，而不是下标志
    -->
    <ul>
      <li v-for="(item,key) in obj" :key="key">{{ item }} , {{key}}</li>
    </ul>
    <!-- 循环数字 -->
    <ul>
      <li v-for="item in 6" :key="item">{{ item }}</li>
    </ul>
    <!-- 循环字符串 -->
    <ul>
      <li v-for="item in str" :key="item"> {{ item }}</li>
    </ul>
</div>
</template>
<script>
export default {
  data(){
    return {
      arr: [1,2,3,4,5],
      obj: {
        a: 666,
        b: 777,
        c: 888
      },
      str: "你好吗？"
    }
  }
}
</script>
<style scoped>
</style>